<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap 4.0/css/bootstrap.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>
  <!--
5挡：
  <576px  超小屏幕   col-
  ≥576px  小屏幕    col-sm-
  ≥768px  中屏幕   col-md-
  ≥992px  大屏幕   col-lg-
  ≥1200px  超大屏幕  col-xl-
-->
<body>
    
                       
                            
       
    <div class="dahezi">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-4">
                    <div class="row">
                        <div class="header1 ">
                            <div class="box44">
                                <a href="#"><img src="./img/logo.svg" alt=""></a>
                            </div>
                            <div class="aaaa">
                                <div class="aaaa1">
                                    <ul>
                                        <li>
                                            <a href="#">门店</a>
                                        </li>
                                        <li>
                                            <a href="#">星享俱乐部</a>
                                        </li>
                                        <li>
                                            <a href="#">菜单</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="aaaa2">
                                    <ul>
                                        <li>
                                            <a href="#">星巴克移动运用</a>
                                        </li>
                                        <li>
                                            <a href="#">星礼卡</a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                星巴克臻选™
                                              </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                啡快™ － 在线点 到店取
                                              </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                专星送™
                                              </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                咖啡星讲堂
                                              </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                上海烘焙工坊
                                              </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                关于星巴克
                                              </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                帮助中心
                                              </a>
                                        </li>
                                        
                                    </ul>
    
                                </div>
                                
                            </div>
                
                
                
                            <div class="box55">
                               
                                <a href="#">门店</a>
                        
                        
                                <a href="#">我的帐户</a>
                        
                        
                                <a href="#">菜单</a>
                            </div>
                        
                            
                            <div class="box66">
                                <i class="iconfont icon-sang aaaa3"></i>
                            </div>
                        

                     
                           
                        
                
                        </div>
                
               
                    </div>
                
                    
                    <div class="body1">
                        <p>心情惬意，来杯咖啡吧 ☕</p>
                        <div class="ann">
                            <a href="#"><i class="iconfont icon-tubiaozhizuomoban"></i>登录</a>
                            <a href="#">注册</a>
                        </div>
                        
                    </div>
                </div>
                 <div class="col-lg-8">
                     <div class="beij">
                         <img src="./img/2.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="chuiniu1">
                         <div class="container">
                             <div class="row">
                                 <div class="col-md-4">
                                     
                                        <img src="./img/3.jpg" alt="" class="img-fluid">
                                     
                                 </div>
                                 <div class="col-md-4">
                                     <img src="./img/3.jpg" alt="" class="img-fluid">
                                 </div>
                                 <div class="col-md-4">
                                     <img src="./img/3.jpg" alt="" class="img-fluid">
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="chuiniu2">
                         <div class="container">
                             <div class="row ">
                                 <div class="col-md-6">
                                     <p>星享俱乐部</p>
                                     <p>
                                        开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a>了解更多 ›</a>
                                     </p>
                                     <a href="#">登录</a>
                                    <a href="#">注册</a>
                                 </div>
                                 <div class="col-md-6 text-center">
                                     <img src="./img/6.svg" alt="" class="img-fluid">
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="chuinui3">
                         <div class="container">
                             <div class="row">
                                <div class="col-md-12 text-center">
                                    <p>星巴克精选</p>
                                    <p>在星巴克天猫旗舰店发现更多咖啡心意</p>
                                </div>
                                <div class="col-md-3">
                                    <div class="box2 text-center">
                                        <img src="./img/9.png" alt="" class="img-fluid">
                                        <div class="box3">
                                            <a href="#">金星礼包</a> 
                                            <a href="">星享卡新升级</a>
                                            <a href="#"> 更多心意好礼</a>
                                            <a href="#">了解更多 ›</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="box2 text-center">
                                        <img src="./img/9.png" alt="" class="img-fluid">
                                        <div class="box3">
                                            <a href="#">金星礼包</a> 
                                            <a href="">星享卡新升级</a>
                                            <a href="#"> 更多心意好礼</a>
                                            <a href="#">了解更多 ›</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="box2 text-center">
                                        <img src="./img/9.png" alt="" class="img-fluid">
                                        <div class="box3">
                                            <a href="#">金星礼包</a> 
                                            <a href="">星享卡新升级</a>
                                            <a href="#"> 更多心意好礼</a>
                                            <a href="#">了解更多 ›</a>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="box2 text-center">
                                        <img src="./img/9.png" alt="" class="img-fluid">
                                        <div class="box3">
                                            <a href="#">金星礼包</a> 
                                            <a href="">星享卡新升级</a>
                                            <a href="#"> 更多心意好礼</a>
                                            <a href="#">了解更多 ›</a>
                                        </div>

                                    </div>
                                </div>
                             </div>
                             
                         </div>
                     </div>
                 </div>
            </div>
            
        </div>
    </div>
    
</body>
<script src="./js/jQuery.min.js"></script>
<script src="./bootstrap 4.0/js/bootstrap.js"></script>
<script src="./js/index.js"></script>
</html>